﻿@{
    ViewData["Title"] = "登录";
    Layout = null; // 登录页独立，不使用全局布局
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <!-- 引用 Bootstrap 样式（确保路径与安装位置一致） -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <!-- 自定义样式增强视觉效果 -->
    <style>
        body {
            background-color: #f8f9fa;
        }

        .card {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }

            .card:hover {
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            }

        #captchaImg {
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: border-color 0.2s ease;
        }

            #captchaImg:hover {
                border-color: #6c757d;
            }

        .btn-primary {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <!-- 登录卡片 -->
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="mb-0">仓储管理系统-登录</h3>
                    </div>
                    <div class="card-body">
                        <!-- 错误提示 -->
                        @if (ViewBag.ErrorMessage != null)
                        {
                            <div class="alert alert-danger" role="alert">
                                @ViewBag.ErrorMessage
                            </div>
                        }

                        <!-- 登录表单 -->
                        <form method="post" asp-controller="Login" asp-action="Login"
                              class="needs-validation" novalidate>
                            @Html.AntiForgeryToken()

                            <!-- 用户名 -->
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" name="username" required />
                                <div class="invalid-feedback">请输入用户名</div>
                            </div>

                            <!-- 密码 -->
                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="password" name="password" required />
                                <div class="invalid-feedback">请输入密码</div>
                            </div>

                            <!-- 验证码 -->
                            <div class="mb-3">
                                <label for="captcha" class="form-label">验证码</label>
                                <div class="d-flex align-items-center">
                                    <input type="text" class="form-control me-2" id="captcha" name="captcha" required
                                           placeholder="请输入验证码" />
                                    <img id="captchaImg" src="@Url.Action("CaptchaImage", "Login")"
                                         alt="验证码" style="height: 38px; width: 100px;" />
                                </div>
                                <div class="invalid-feedback">请输入验证码</div>
                            </div>

                            <!-- 登录按钮 -->
                            <button type="submit" class="btn btn-primary">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript：验证码刷新 + 前端表单验证 -->
    <script>
        // 1. 验证码刷新逻辑
        document.getElementById("captchaImg").addEventListener("click", function() {
            this.src = "@Url.Action("CaptchaImage", "Login")?t=" + new Date().getTime();
        });

        // 2. 前端表单验证（Bootstrap 原生验证）
        (function() {
            'use strict';
            var forms = document.querySelectorAll('.needs-validation');
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        })();
    </script>
</body>
</html>